import React from "react";
import Chart from "echarts-for-react";
import style from "./IndexDayEcharts.less";


class IndexDayEcharts extends React.Component {
    setOption  = () => {
        return {
         tooltip: {
             trigger: 'axis',
             formatter: function(params, ticket, callback) {
     
                 var res = params[0].name;
     
                 for (var i = 0, l = params.length; i < l; i++) {
                     if (params[i].seriesType === 'line') {
                         res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value ? params[i].value : '-');
                     } else {
                         res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value ? params[i].value : '-');
                     }
                 }
                 return res;
     
             }
         },
         grid: {
             containLabel: true
         },
       
         xAxis: [{
             type: 'category',
             axisTick: {
                 alignWithLabel: true
             },
             data: this.props.IndexDayData.xAxis
         }],
         dataZoom: [{
             type: 'slider',
             xAxisIndex: 0,
             filterMode: 'empty',
             start: 0,
             end: 100
         }, {
             type: 'inside',
             xAxisIndex: 0,
             filterMode: 'empty',
             start: 0,
             end: 100
         }],
         yAxis: [{
             type: 'value',
             name: 'mg/m³',
             min: 0,
             position: 'left',
             axisLabel: {
                 formatter: '{value} '
             }, max: function(value) {
                return parseInt(value.max * 1.3)
            }
         }],
         series: [{
             name:  "mg/m³",
             type: 'line',
             label: {
                 normal: {
                     show: true,
                     position: 'top',
                 }
             },
             lineStyle: {
                 normal: {
                     width: 1,
                     shadowColor: 'rgba(0,0,0,0.4)',
                     shadowBlur: 10,
                     shadowOffsetY: 10
                 }
             },
             data:this.props.IndexDayData.series?this.props.IndexDayData.series[0]:[]
         },
         {
            name:  "mg/m³",
            type: 'line',
            label: {
                normal: {
                    show: true,
                    position: 'top',
                }
            },
            lineStyle: {
                normal: {
                    width: 3,
                    shadowColor: 'rgba(0,0,0,0.4)',
                    shadowBlur: 10,
                    shadowOffsetY: 10
                }
            },
            data: this.props.IndexDayData.series?this.props.IndexDayData.series[1]:[]
        }]
        }}
    
  


    render() {
        console.log(this.props)
        return (
          
                
       
            <div id="main" >
                 <Chart option={this.setOption()} notMerge lazyUpdate  className={style.main}/>
            </div>

         
           
          );
    }
   
}

export default IndexDayEcharts;
